
<template> 
  <div class="chartNum"> 
    <div class="box-item"> 
      <li :class="{'number-item': !isNaN(item) }" v-for="(item,index) in orderNum" :key="index"> 
        <span v-if="!isNaN(item)"> 
          <i ref="numberItem">0123456789</i> 
        </span> 
      </li> 
    </div> 
  </div> 
</template> 
<script> 
export default { 
  data() { 
    return { 
      orderNum: ["0", "0", "0", "0", "0"] // 默认订单总数 
    }; 
  }, 
  props: { 
    count: "" 
  }, 
  created() { 
    this.updateData(); 
  }, 
  mounted() {}, 
  methods: { 
    updateData() { 
      setInterval(() => { 
        this.changeNumber(this.count); 
        setTimeout(() => { 
          this.toOrderNum(this.count); 
        }, 700); 
      }, 10000); 
    }, 
    changeNumber(num) { 
      let half = Math.floor(num * Math.random()); 
      // console.log(num, half); 
      if (!isNaN(half)) { 
        this.toOrderNum(half); 
      } 
    }, 
    // 处理数字 
    toOrderNum(num) { 
      num = num.toString(); 
      //  num = num+'';
      if (num.length < 5) { 
        num = "0" + num; // 如未满八位数，添加"0"补位 
        this.toOrderNum(num); // 递归添加"0"补位 
      } else if (num.length === 5) { 
        this.orderNum = num.split(""); 
      } else { 
        console.log("超过8位数"); 
      } 
    }, 
    // 设置文字滚动 
    setNumberTransform() { 
      this.numberItems = this.$refs.numberItem; 
      this.numberArr = this.orderNum.filter(item => !isNaN(item)); 
      // 结合CSS 对数字字符进行滚动 
      for (let index = 0; index < this.numberItems.length; index++) { 
        let elem = this.numberItems[index]; 
        // console.log(elem); 
        elem.style.transform = `translate(-50%, -${this.numberArr[index] * 
          10}%)`; 
      } 
    } 
  }, 
  watch: { 
    count: function(newVal) { 
      this.toOrderNum(newVal); 
    }, 
    orderNum: function(newVal) { 
      this.setNumberTransform(); 
    } 
  } 
}; 
</script> 
<style scoped lang='scss'> 
.chartNum { 
  text-align: center; 
} 
/*滚动数字设置*/ 
.box-item { 
  position: relative; 
  height: 100px; 
  font-size: 54px; 
  line-height: 41px; 
  text-align: center; 
  list-style: none; 
  color: #2d7cff; 
  writing-mode: vertical-lr; 
  text-orientation: upright; 
  /*文字禁止编辑*/ 
  -moz-user-select: none; /*火狐*/ 
  -webkit-user-select: none; /*webkit浏览器*/ 
  -ms-user-select: none; /*IE10*/ 
  -khtml-user-select: none; /*早期浏览器*/ 
  user-select: none; 
  /* overflow: hidden; */ 
} 
/* 默认逗号设置 */ 
.mark-item { 
  width: 10px; 
  height: 100px; 
  margin-right: 5px; 
  line-height: 10px; 
  font-size: 48px; 
  position: relative; 
  & > span { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    writing-mode: vertical-rl; 
    text-orientation: upright; 
  } 
} 
/*滚动数字设置*/ 
.number-item { 
  width: 41px; 
  height: 75px; 
  list-style: none; 
  margin-right: 5px; 
  background: rgba(250, 250, 250, 1); 
  border-radius: 4px; 
  border: 1px solid rgba(221, 221, 221, 1); 
  & > span { 
    position: relative; 
    display: inline-block; 
    margin-right: 10px; 
    width: 100%; 
    height: 100%; 
    writing-mode: vertical-rl; 
    text-orientation: upright; 
    overflow: hidden; 
    & > i { 
      font-style: normal; 
      position: absolute; 
      top: 11px; 
      left: 50%; 
      transform: translate(-50%, 0); 
      transition: transform 1s ease-in-out; 
      letter-spacing: 10px; 
    } 
  } 
} 
.number-item:last-child { 
  margin-right: 0; 
} 
</style>

